<template>
  <div class="product-list-page">
    <!--    购买提示-->
    <a-alert
      message="购买须知"
      description="*以下服务内容和交付清单都包含于下方各会员版本"
      type="info"
      show-icon
    />
    <!--    购买模块-->
    <a-card class="product-detail">
      <a-tabs :default-active-key="defaultActiveKey" @change="changeTab">
        <!--        循环产生tab-->
        <a-tab-pane v-for="product in productList" :key="product.moduleCode" :tab="product.name">
          <div class="product-list">
            <product-card v-for="suite in product.suiteList" :key="suite.code" v-bind="suite">
            </product-card>
          </div>
          <functions-table
            v-if="product.functions"
            :table-data="product.functions"
            :suite-list="product.suiteList"/>
        </a-tab-pane>
      </a-tabs>
    </a-card>

  </div>
</template>

<script>
  import productList from '@/perm/views/product/product-data'
  import ProductCard from '@/perm/views/product/components/product-card'
  import FunctionsTable from './components/funcions-table'

  export default {
    name: 'GmcpList',
    components: {
      ProductCard,
      FunctionsTable
    },
    data () {
      return {
        defaultActiveKey: '企业微信裂变',
        productList
      }
    },
    created () {
      // 从路由里加载默认模块
      this.defaultActiveKey = this.$route.query.active || productList[0].moduleCode
    },
    methods: {
      changeTab (key) {
        console.log(key)
      }
    }
  }
</script>

<style lang="less">
  .product-list-page {
    .ant-tabs-nav .ant-tabs-tab {
      padding: 14px 18px;
      font-size: 16px;
    }

    .product-detail {
      margin-top: 16px;
    }

    .product-list {
      padding-bottom: 10px;
      display: flex;
      justify-content: flex-start;
      width: 90%;
      text-align: center;
      margin: 16px auto 0;

      .product-card {
        margin-left: 3%;
        margin-right: 3%;
      }
    }
  }

</style>
